<template>
	<view class="container">
		<view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30 bg-color h" 
		style="
		justify-content:space-between;
		padding-top: 20rpx;
		">
			<u-subsection 
			:list="list" 
			@change="sectionChange" 
			:bold="bold"
			:active-color="activeColor"
			:current="current" 
			:mode="mode"
			style="width: 200rpx;"
			height="60"
			font-size="25"
			></u-subsection>
			
			<u-subsection
			:list="list2" 
			@change="sectionChange2" 
			:bold="bold2"
			:active-color="activeColor2"
			:current="current2" 
			:mode="mode2"
			style="width: 400rpx;"
			height="60"
			font-size="25"
			></u-subsection>
		</view>
		<view class="content-header">
			<view class="content-title">{{list2_content}}</view>
			<u-line :border-style="borderStyle" color="red" :color="color" :length="length" :direction="direction" :hair-line="hairLine"></u-line>
			
			<view class="content-number content-number-1">{{all_money_str}}：{{all_money}}</view>
			<view class="content-number content-number-2">平均值：{{avg_money}}</view>
			
			<view class="content-chart">
				<!--#ifdef MP-ALIPAY -->
				<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio" :style="{'width':cWidth+'px','height':cHeight+'px'}" @touchstart="touchLineA" @touchmove="moveLineA" @touchend="touchEndLineA"></canvas>
				<!--#endif-->
				<!--#ifndef MP-ALIPAY -->
				<canvas type="2d" id="canvasLineA" class="charts" @touchstart="touchLineA" @touchmove="moveLineA" @touchend="touchEndLineA"></canvas>
				<!--#endif-->
			</view>
			<view class="content-leaderboard">
				<view class="leaderboard_title">{{leaderboard_title}}</view>
			</view>
			
			<scroll-view scroll-y="true" :style="{height:scroll_view_height+'px'}" @scrolltolower="scrolltolower()">
				<view class="u-flex u-p-l-30 u-p-r-30 u-p-t-10 u-p-b-20" v-for="(item, index) in leaderboard_list" :key="index">
					<view class="u-flex">
						<image slot="icon" class="box-icon" :src="item.icon" mode="" :lazy-load="lazy_load"></image>
					</view>
					<view class="u-flex-1">
						<view class="u-flex-1" style="display: flex;justify-content:center;align-items:center;">
							<view class="box-left">
								{{item.bill_type}}
							</view>
							<view class="u-flex-1 box-right">
								{{item.bill_money}}
							</view>
						</view>
						<view class="u-flex-1">
							<u-line-progress :percent="item.percent" :active-color="lineActiveColor" :inactiveColor="lineInactiveColor"
							striped="true" stripedActive="true" height="25"></u-line-progress>
						</view>
					</view>
					
					
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import uCharts from '@/js_sdk/u-charts/u-charts/u-charts.js';
	var _self;
	var canvaLineA=null;
	var lastMoveTime=null;//最后执行移动的时间戳
	export default {
		data() {
			return {
				list:['支出','收入'],
				current: 0,
				bold : false,
				activeColor:"#2d2d2d",
				mode: "subsection",
				
				list2:['周','月','年'],
				current2:0,
				bold2 : false,
				activeColor2:"#2d2d2d",
				mode2: "subsection",
				list2_content: "本周",
				
				all_money_str: "总支出",
				
				direction: 'row',
				hairLine: true,
				length: '100%',
				color: "#d8d8d8",
				borderStyle: 'solid',
				
				all_money: "0",
				avg_money: "0",
				
				leaderboard_title: "支出排行榜",
				
				leaderboard_list: [],
				
				phone_height: "0", // default:624
				scroll_view_height: "0", // default:277
				
				lineActiveColor: "#FDDC2D",
				lineInactiveColor: "#f4f4f4",
				
				cWidth: '',
				cHeight:'',
				pixelRatio:1,
				
				lazy_load: true,
			}
		},
		methods: {
			sectionChange(index){
				this.current = index;
				this.leaderboard_title = this.list[index] + "排行榜";
				this.all_money_str = "总" + this.list[index];
				
				this.getServerData();
			},
			sectionChange2(index){
				this.current2 = index;
				
				if(index == 0 || index == 1){
					this.list2_content = "本" + this.list2[index];
				}
				if(index == 2){
					this.list2_content = "今" + this.list2[index];
				}
				this.getServerData();
			},
			getServerData(){
				this.leaderboard_list = [];
				this.all_money = 0;
				this.avg_money = 0;
				
				let name = "";
				let categories = ["03/15", "03/16", "03/17", "03/18", "03/19", "03/20", "03/21"];
				let categories_data = [10, 110, 90, 60, 0, 0, 0];
				
				let LineA={categories:[],series:[]};
				LineA.categories = categories;
				LineA.series = [{name: name, data: categories_data}]
				
				_self.showLineA("canvasLineA",LineA);
			},
			showLineA(canvasId,chartData){
				
				const query = uni.createSelectorQuery();
					  query.select('#'+canvasId)
					  .fields({ node: true, size: true })
					  .exec((res) => {
							const canvas = res[0].node
							const ctx = canvas.getContext('2d')
							canvas.width = res[0].width * _self.pixelRatio
							canvas.height = res[0].height * _self.pixelRatio
							
							canvaLineA = new uCharts({
								$this:_self,
								
								canvas2d:true,
								context:ctx,
								canvasId: canvasId,
								type: 'line',
								colors:['#FDDC2D', '#f04864', '#8543e0', '#90ed7d'],
								fontSize:11,
								padding:[15,15,15,15],
								legend:{
									show:false,
									padding:5,
									lineHeight:11,
									margin:0,
								},
								dataLabel:false,
								dataPointShape:true,
								background:'#FFFFFF',
								pixelRatio:_self.pixelRatio,
								categories: chartData.categories,
								series: chartData.series,
								animation: true,
								xAxis: {
									type:'grid',
									gridColor:'#CCCCCC',
									gridType:'dash',
									dashLength:8,
									disableGrid: true
								},
								yAxis: {
									gridType:'dash',
									gridColor:'#CCCCCC',
									dashLength:8,
									disableGrid: true,
									disabled:true
								},
								width: _self.cWidth*_self.pixelRatio,
								height: _self.cHeight*_self.pixelRatio,
								extra: {
									line:{
											type: 'straight'
										}
									}
							});
									
					  })
			},
			touchLineA(e) {
				lastMoveTime=Date.now();
			},
			moveLineA(e){
				let currMoveTime = Date.now();
				let duration = currMoveTime - lastMoveTime;
				if (duration < Math.floor(1000 / 60)) return;//每秒60帧
					lastMoveTime = currMoveTime;
							
					let currIndex=canvaLineA.getCurrentDataIndex(e);
					if(currIndex>-1&&currIndex<canvaLineA.opts.categories.length){
						let riqi=canvaLineA.opts.categories[currIndex];
						let leibie=canvaLineA.opts.series[0].name;
						let shuju=canvaLineA.opts.series[0].data[currIndex];
						this.Interactive=leibie+':'+riqi+'-'+shuju+'元';
					}
					canvaLineA.showToolTip(e, {
						format: function (item, category) {
							return category + ' ' + item.name + ':' + item.data 
						}
					});
			},
			touchEndLineA(e){
				let currIndex=canvaLineA.getCurrentDataIndex(e);
				if(currIndex>-1&&currIndex<canvaLineA.opts.categories.length){
					let riqi=canvaLineA.opts.categories[currIndex];
					let leibie=canvaLineA.opts.series[0].name;
					let shuju=canvaLineA.opts.series[0].data[currIndex];
					this.Interactive=leibie+':'+riqi+'-'+shuju+'元';
				}
				canvaLineA.touchLegend(e);
				canvaLineA.showToolTip(e, {
					format: function (item, category) {
						return category + ' ' + item.name + ':' + item.data 
					}
				});
			},
			scrolltolower(){
				console.log('加载更多');
			}
		},
		onShow() {
		},
		onLoad(options){
			_self = this;
			// 计算scroll-view高度
			let _this = this;
			uni.getSystemInfo({
				success(res) {
					_this.phone_height = res.windowHeight
					let v = uni.createSelectorQuery().select(".container");
					v.boundingClientRect(data=>{
						_this.scroll_view_height = _this.phone_height - data.height;
					}).exec();
				}
			})

			this.cWidth = uni.upx2px(700);
			this.cHeight = uni.upx2px(280);
			this.getServerData();
		}
	}
</script>

<style lang="scss">	
	.container{
		background-color: #ffffff;
	}
	.bg-color{
		background-color: #FDDC2D
	}
	.content-title{
		width: 150rpx;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 25rpx;
		text-align: center;
		border-bottom: 2px solid #000
	}
	.content-number{
		width: 90%;
		margin-left: 5%;
		height: 40rpx;
		line-height: 40rpx;
		font-size: 25rpx;
		text-align: left;
		color: #7e8086;
	}
	.content-number-1{
		margin-top: 20rpx;
	}
	.content-number-2{
		height: 60rpx;
		line-height: 40rpx;
		border-bottom: 1px solid #d8d8d8;
	}
	.content-chart{
		width: 100%;
		height: 280rpx;
		border-bottom: 1px solid #d8d8d8
	}
	.content-leaderboard{
		width: 100%;
	}
	.leaderboard_title{
		width: 180rpx;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 25rpx;
		text-align: center;
		color: #7e8086;
	}
	.box-icon{
		width: 50rpx;
		height: 50rpx;
		margin-right: 35rpx;
	}
	.box-left{
		display: initial;
		width: auto;
		font-weight: 500;
		font-size: 28rpx;
	}
	.box-right{
		display: initial;
		overflow: hidden;
		text-align: right;
		vertical-align: middle;
		color: #909399;
		font-size: 26rpx;
	}
	.charts{
		width: 100%;
		height: 280upx;
	}
</style>
